* {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;

    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
.section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100vh;
    background: #3586ff;
    overflow: hidden;
    animation-name: sky-color;
    animation-duration: 35s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction:normal;
}
/* 这是浪 */
.section .wave {
    position: absolute;
    bottom: 0;
    /* margin-bottom: 10px; */
    left: 0;
    width: 100%;
    height: 60px;
    background: url(../images/wave.png);
    background-size: 1000px 60px;
}
.section .wave.wave1
{
    animation: animate 30s linear infinite;
    z-index: 1000;
    opacity: 1;
    animation-delay: 0;
    bottom: 0;
    /* bottom: 50; */
}
.section .wave.wave2 {
    animation: animate2 15s linear infinite;
    z-index: 999;
    opacity: 0.5;
    animation-delay: -5s;
    bottom: 10;
}
.section .wave.wave3 {
    animation: animate1 30s linear infinite;
    z-index: 998;
    opacity: 0.2;
    animation-delay: -2s;
    bottom: 15;
}
.section .wave.wave4 {
    animation: animate2 15s linear infinite;
    z-index: 997;
    opacity: 0.7;
    animation-delay: -5s;
    bottom: 20;
}
/* 这是云 */
.cloud{
    position: fixed;
    display:block;
    width: 60px;
    height:30px;
    background-color: white;
    z-index: 10;
}

.cloud1{
    margin-left:10px;
    margin-top:17px;
    animation: slide1 22.5s ease-in-out alternate infinite;
}

@keyframes slide1{
    from {margin-left: 10px;}
    to {margin-left: 580px;}
}

.cloud2{
    margin-left:180px;
    margin-top:25px;
    animation: slide2 28.5s ease-in-out alternate infinite;
}

@keyframes slide2{
    from {margin-left: 20px;}
    to {margin-left: 600px;}
}

.cloud-circle{
    border-radius: 50%;
    background-color: white;
    position: fixed;
    display:block;
    width: 25px;
    height:25px;
}

.cloud-circle1{
    width: 30px;
    height:30px;
    margin-left:38px;
    margin-top:-8px;
}
.cloud-circle2{
    margin-left:48px;
    margin-top:5px;
}
.cloud-circle3{
    width: 30px;
    height:30px;
    margin-left:18px;
    margin-top:-18px;
}
.cloud-circle4{
    width: 30px;
    height:30px;
    margin-left:-13px;
    margin-top:0px;
}
.cloud-circle5{
    width: 30px;
    height:30px;
    margin-left:0px;
    margin-top:-15px;
}
/* 这是风车和山 */
.section .moutain {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 300px;
    height: 370px;
}
.section  .fengche {
    position: absolute;
    background-color: blue;
    
    left: 8%;
    bottom: 25%;

}
.section  .fengche .floors {
    height: 100px;
    width: 74px;
    background: #292f4c;
    left: 10%;
    position: absolute;
    bottom: 80px;
}

.floors:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 100px solid #292f4c;
    left: -11px;
}

.floors:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 100px solid #292f4c;
    right: -11px;
    bottom: 0;
}

.roof {
    border-left: 48px solid transparent;
    border-right: 48px solid transparent;
    border-bottom: 48px solid #292f4c;
    position: absolute;
    width: 0;
    height: 0;
    bottom: 180px;
    left: -10px;
}

.house {
    position: absolute;
    bottom: -10px;
    left: 122px;
}

.door {
    height: 32px;
    width: 24px;
    background: linear-gradient(to bottom, #ffed60 0%, #ffb73c 100%);
    border-radius: 12px 12px 0 0;
    position: absolute;
    bottom: 0;
    left: 25px;
    box-shadow: 0 0px 15px #ffed60;
}

.light {
    height: 12px;
    width: 12px;
    background: linear-gradient(to bottom, #ffed60 0%, #ffb73c 100%);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 30px;
}

.light:before {
    content: "";
    height: 36px;
    width: 12px;
    background: linear-gradient(to bottom, #ffed6000 0%, #ffb73c 50%, #ffed6000 100%);
    position: absolute;
    top: -12px;
    opacity: 0.3;
}

.light:after {
    content: "";
    height: 36px;
    width: 12px;
    background: linear-gradient(to bottom, #ffed6000 0%, #ffb73c 50%, #ffed6000 100%);
    position: absolute;
    top: -12px;
    opacity: 0.3;
    transform: rotate(90deg);
}

.fan-wing {
    width: 100px;
    height: 24px;
    border-bottom: 8px solid #292f4c;
    position: relative;
    left: 0;
    left: 0;
}

.fan-wing .fan-comb {
    width: 64px;
    height: inherit;
    border: 4px solid #292f4c;
}

.fan-wing .fan-comb ul li {
    border-right: 4px solid #292f4c;
    display: inline;
    margin-left: 3.4px;
}

.fan-wing.fan-1 {
    left: 0;
}

.fan-wing.fan-2 {
    transform: rotate(90deg);
    transform-origin: 112px 12px;
}

.fan-wing.fan-3 {
    transform: rotate(180deg);
    transform-origin: 100px 0px;
}

.fan-wing.fan-4 {
    transform: rotate(270deg);
    transform-origin: 64px -12px;
}

.windmill {
    position: absolute;
    top: -216px;
    z-index: 8;
    left: -65px;
    animation: rotatemill 10s infinite linear;
    transform-origin: 105px 25px;
}

@keyframes rotatemill {
    100% {
        transform: rotate(360deg);
    }
}
.hill{
    position: fixed;
    display:block;
    /* background-color: brown; */
    /* border: 20px solid black; */
    /* border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 40px solid red; */

    /* transform: rotate(45deg); */
    /* width:60px;
    height:60px; */
}

.hill1{
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid green;
    margin-left:0px;
    bottom: 0;
    z-index: 995;
    
}

.hill3{
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid brown;
    margin-left:18px;
    bottom: 0;
    z-index: 996;
}
.hill4{
    width: 140px;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 180px solid brown;
    margin-left:100px;
    bottom: 0;
    z-index: 994;
}
@keyframes animate 
{
    0%
    {
        background-position-x: 0;
    }
    100%
    {
        background-position-x: 1000px;
    }
}
@keyframes animate2 
{
    0%
    {
        background-position-x: 0;
    }
    100%
    {
        background-position-x: -1000px;
    }
}


@keyframes sky-color {
    0% {
        background: #3586ff;
    }
    15% {
        background: rgb(54, 163, 231);
    }
    30% {
        background: rgb(102, 196, 255);
    }
    45% {
        background: rgb(224, 138, 26);
    }
    50% {
        background: rgb(243, 243, 84);
    }
    65% {
        background: rgb(36, 29, 4);
    }
    80% {
        background: rgb(11, 12, 5);
    }
    95% {
        background: black;
    }
    100% {
        background: rgb(154, 229, 252);
    }
    
}

/* 这是日月 */
.spinner{
    position: absolute;
    /* display:block; */
    width: 100%;
    height:100%;
    border-radius: 50%;
    margin-top: 150px;
    z-index: 20;
    animation-name: spinner-rotation;
    animation-duration:35s;     
    animation-timing-function: linear;
    animation-direction: reverse;
    animation-iteration-count: infinite;
}

@keyframes spinner-rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
} 
/* {
  0%
  {
    transform: rotate(0deg);
  }
  99%
  {
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(0deg);
  }
} */

.sun{
    position: fixed;
    display:block;
    width: 30px;
    height:30px;
    background-color: yellow;
    border-radius: 50%;
    left: 80%;
    top: 50%;
    transform: translate(-50%,-100%);
    /* z-index: -25; */
}


/* 这是月亮和星星 */
.moon {
    position: absolute;
    top: 5%;
    right: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: inset -20px -15px 0 #fff;
  }
  
  .star {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
    animation: staring 2s linear infinite;
  }
  
  .star1 {
    top: 47%;
    left: 100%;
    animation-delay: -0.1s;
  }
  
  .star2 {
    top: 28%;
    left: 23%;
    animation-delay: -0.2s;
  }
  
  .star3 {
    top: 7%;
    left: 14%;
    animation-delay: -0.3s;
  }
  
  .star4 {
    top: 50%;
    left: 56%;
    animation-delay: -0.4s;
  }
  
  .star5 {
    top: 36%;
    left: 82%;
    animation-delay: -0.5s;
  }
  
  .star6 {
    top: 29%;
    left: 26%;
    animation-delay: -0.6s;
  }
  
  .star7 {
    top: 29%;
    left: 10%;
    animation-delay: -0.7s;
  }
  
  .star8 {
    top: 25%;
    left: 24%;
    animation-delay: -0.8s;
  }
  
  .star9 {
    top: 12%;
    left: 55%;
    animation-delay: -0.9s;
  }
  
  .star10 {
    top: 32%;
    left: 9%;
    animation-delay: -1s;
  }
  
  .star11 {
    top: 41%;
    left: 3%;
    animation-delay: -1.1s;
  }
  
  .star12 {
    top: 37%;
    left: 97%;
    animation-delay: -1.2s;
  }
  
  .star13 {
    top: 10%;
    left: 61%;
    animation-delay: -1.3s;
  }
  
  .star14 {
    top: 15%;
    left: 24%;
    animation-delay: -1.4s;
  }
  
  .star15 {
    top: 8%;
    left: 28%;
    animation-delay: -1.5s;
  }
  
  .star16 {
    top: 20%;
    left: 59%;
    animation-delay: -1.6s;
  }
  
  .star17 {
    top: 37%;
    left: 35%;
    animation-delay: -1.7s;
  }
  
  .star18 {
    top: 11%;
    left: 82%;
    animation-delay: -1.8s;
  }
  
  .star19 {
    top: 19%;
    left: 10%;
    animation-delay: -1.9s;
  }
  
  .star20 {
    top: 5%;
    left: 55%;
    animation-delay: -2s;
  }
  
  .star21 {
    top: 2%;
    left: 26%;
    animation-delay: -2.1s;
  }
  
  .star22 {
    top: 28%;
    left: 20%;
    animation-delay: -2.2s;
  }
  
  .star23 {
    top: 35%;
    left: 29%;
    animation-delay: -2.3s;
  }
  
  .star24 {
    top: 48%;
    left: 21%;
    animation-delay: -2.4s;
  }
  
  .star25 {
    top: 18%;
    left: 67%;
    animation-delay: -2.5s;
  }
  
  .star26 {
    top: 31%;
    left: 69%;
    animation-delay: -2.6s;
  }
  
  .star27 {
    top: 3%;
    left: 55%;
    animation-delay: -2.7s;
  }
  
  .star28 {
    top: 37%;
    left: 74%;
    animation-delay: -2.8s;
  }
  
  .star29 {
    top: 50%;
    left: 38%;
    animation-delay: -2.9s;
  }
  
  .star30 {
    top: 17%;
    left: 2%;
    animation-delay: -3s;
  }
  
  .star31 {
    top: 2%;
    left: 69%;
    animation-delay: -3.1s;
  }
  
  .star32 {
    top: 13%;
    left: 28%;
    animation-delay: -3.2s;
  }
  
  .star33 {
    top: 23%;
    left: 38%;
    animation-delay: -3.3s;
  }
  
  .star34 {
    top: 36%;
    left: 17%;
    animation-delay: -3.4s;
  }
  
  .star35 {
    top: 33%;
    left: 79%;
    animation-delay: -3.5s;
  }
  
  .star36 {
    top: 23%;
    left: 96%;
    animation-delay: -3.6s;
  }
  
  .star37 {
    top: 27%;
    left: 44%;
    animation-delay: -3.7s;
  }
  
  .star38 {
    top: 20%;
    left: 70%;
    animation-delay: -3.8s;
  }
  
  .star39 {
    top: 9%;
    left: 58%;
    animation-delay: -3.9s;
  }
  
  .star40 {
    top: 9%;
    left: 4%;
    animation-delay: -4s;
  }
  
  @keyframes staring {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }


  /* 文字的css */
  .text {
    position: absolute;
    top: 0;
    right: 5%;
  }
  .text h1 {
    font-size: 14px;
    color: #fff;
    
  }
  .text h1 span {
    display: inline-block;
    animation:  animate 1s linear forwards;
    opacity: 0;
  }
@keyframes animate {
    0% {
        opacity: 0;
        transform: rotateY(90deg);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
        filter: blur(0);
    }
}
/* 第一段文字 */
.text h1:nth-child(1) span:nth-child(1) {
  animation-delay: 0.5s;
}
.text h1:nth-child(1) span:nth-child(2) {
  animation-delay: 0.8s;
}
.text h1:nth-child(1) span:nth-child(3) {
  animation-delay: 1.2s;
}
.text h1:nth-child(1) span:nth-child(4) {
  animation-delay: 1.5s;
}
.text h1:nth-child(1) span:nth-child(5) {
  animation-delay: 1.75s;
}
.text h1:nth-child(1) span:nth-child(6) {
  animation-delay: 2s;
}
.text h1:nth-child(1) span:nth-child(7) {
  animation-delay: 2.3s;
}
.text h1:nth-child(1) span:nth-child(8) {
  animation-delay: 2.7s;
}
.text h1:nth-child(1) span:nth-child(9) {
  animation-delay: 3s;
}
.text h1:nth-child(1) span:nth-child(10) {
  animation-delay: 3.3s;
}
.text h1:nth-child(1) span:nth-child(11) {
  animation-delay: 3.6s;
}
  
/* 第二段文字 */
.text h1:nth-child(2) span:nth-child(1) {
  animation-delay: 4s;
}
.text h1:nth-child(2) span:nth-child(2) {
  animation-delay: 4.3s;
}
.text h1:nth-child(2) span:nth-child(3) {
  animation-delay: 4.6s;
}
.text h1:nth-child(2) span:nth-child(4) {
  animation-delay: 5s;
}
.text h1:nth-child(2) span:nth-child(5) {
  animation-delay: 5.3s;
}
.text h1:nth-child(2) span:nth-child(6) {
  animation-delay: 5.6s;
}
.text h1:nth-child(2) span:nth-child(7) {
  animation-delay: 5.9s;
}
.text h1:nth-child(2) span:nth-child(8) {
  animation-delay: 6.2s;
}
.text h1:nth-child(2) span:nth-child(9) {
  animation-delay: 6.6s;
}
.text h1:nth-child(2) span:nth-child(10) {
  animation-delay: 7s;
}
.text h1:nth-child(2) span:nth-child(11) {
  animation-delay: 7.3s;
}
.text h1:nth-child(2) span:nth-child(12) {
  animation-delay: 7.6s;
}
.text h1:nth-child(2) span:nth-child(13) {
  animation-delay: 8s;
}
.text h1:nth-child(2) span:nth-child(14) {
  animation-delay: 8.3s;
}

/* 第三段文字 */
.text h1:nth-child(3) span:nth-child(1) {
  animation-delay: 8.6s;
}
.text h1:nth-child(3) span:nth-child(2) {
  animation-delay: 9s;
}
.text h1:nth-child(3) span:nth-child(3) {
  animation-delay: 9.3s;
}
.text h1:nth-child(3) span:nth-child(4) {
  animation-delay: 9.6s;
}
.text h1:nth-child(3) span:nth-child(5) {
  animation-delay: 10s;
}
.text h1:nth-child(3) span:nth-child(6) {
  animation-delay: 10.3s;
}
.text h1:nth-child(3) span:nth-child(7) {
  animation-delay: 10.6s;
}
.text h1:nth-child(3) span:nth-child(8) {
  animation-delay: 11s;
}

/* 第四段文字 */

.text h1:nth-child(4) span:nth-child(1) {
  animation-delay: 11.4s;
}
.text h1:nth-child(4) span:nth-child(2) {
  animation-delay: 11.8s;
}
.text h1:nth-child(4) span:nth-child(3) {
  animation-delay: 12s;
}
.text h1:nth-child(4) span:nth-child(4) {
  animation-delay: 12.3s;
}
.text h1:nth-child(4) span:nth-child(5) {
  animation-delay: 12.7s;
}
.text h1:nth-child(4) span:nth-child(6) {
  animation-delay: 13s;
}
.text h1:nth-child(4) span:nth-child(7) {
  animation-delay: 13.4s;
}
.text h1:nth-child(4) span:nth-child(8) {
  animation-delay: 13.7s;
}
.text h1:nth-child(4) span:nth-child(9) {
  animation-delay: 14s;
}
.text h1:nth-child(4) span:nth-child(10) {
  animation-delay: 14.4s;
}
.text h1:nth-child(4) span:nth-child(11) {
  animation-delay: 14.7s;
}
.text h1:nth-child(4) span:nth-child(12) {
  animation-delay: 15s;
}
.text h1:nth-child(4) span:nth-child(13) {
  animation-delay: 15.3s;
}
.text h1:nth-child(4) span:nth-child(14) {
  animation-delay: 15.7s;
}